<template>
    <el-dialog v-model="show" title="选择商品" :close-on-click-modal="false" :show-close="false">
        <!-- 搜索 -->
        <!-- <div class="search" :model="listparams">
            <el-input placeholder="请输入商品名称" size="default" v-model="listparams.keyword" />
           
        </div> -->

        <div style="padding-top: 20px">
            <!-- 在input里面回车会造成刷新，大家今晚可以尝试解决一下 -->
            <!-- 在有多个搜索框的情况下添加全部清空功能 -->
            <el-form ref="searchFormRef" :model="listparams">
                <el-form-item label-width="120px">
                    <!-- @keyup.enter 回车事件 -->
                    <!-- <el-input v-model="listParams.keyword" placeholder="请输入账号、姓名" @keyup.enter="submitFn" /> -->
                    <el-input v-model="listparams.keyword" placeholder="请输入商品名称" />
                    <el-button @click="submitFn">
                        <el-icon>
                            <Search />
                        </el-icon>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 表格 -->
        <div>
            <el-table border ref="multipleTableRef" :data="tableData" style="width: 100%">
                <el-table-column type="selection" />
                <el-table-column label="商品名称">
                    <template #default="scope">
                        {{ scope.row.name }}
                    </template>
                </el-table-column>
                <el-table-column label="货号">
                    <template #default="scope">
                        No.{{ scope.row.productSn }}
                    </template>
                </el-table-column>
                <el-table-column label="商品价格">
                    <template #default="scope">
                        ￥{{ scope.row.price }}
                    </template>
                </el-table-column>


            </el-table>
        </div>
        <!-- 分页 -->
        <ElConfigProvider :locale="zhCn">
            <el-pagination v-model:currentPage="listparams.pageNum" v-model:page-size="listparams.pageSize" background
                layout="total, sizes, prev, pager, next ,jumper" :total="total" @size-change="pageSizeChange"
                @current-change="pageNumChange" :page-sizes="[5, 10, 20]" />
        </ElConfigProvider>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emit('hide')">取消</el-button>
                <el-button type="primary" @click="sureFn"> 确定 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { user } from "@/api";
import { Search } from "@element-plus/icons-vue";
import { ElDialog, ElInput, ElButton, ElIcon, FormInstance } from "element-plus";
import { reactive, ref, toRefs } from "vue";
const props = defineProps({
    show: {
        type: Boolean,
        default: true
    }
})
interface IState {
    tableData: Iproduct[]
    listparams: IUserListParams
    total: 0
}
const searchFormRef = ref<FormInstance>();
const state = reactive<IState>({
    tableData: [],
    listparams: {
        pageNum: 1,
        pageSize: 5,
        keyword: ''
    },
    total: 0
})

const emit = defineEmits(['hide', 'refach'])

const getlist = () => {
    user.searchApi(state.listparams).then(res => {
        if (res.code === 200) {
            state.tableData = res.data.list
            state.total = res.data.total
        }
    })
}

getlist()
//搜索
const submitFn = () => {
    state.listparams.pageNum = 1
    getlist()
}

//获取所有已经勾选的选项




//确定添加
const sureFn = () => {

}

//分页功能
const pageSizeChange = () => {
    getlist()
}
const pageNumChange = () => {
    getlist()
}
let { listparams, tableData, total } = toRefs(state)
</script>

<style lang="less" scoped>
.el-input {
    width: 200px;
}
</style>